<!-- 注册&登录页 -->
<template>
  <div>
    <Header></Header>
    <div class="form-pannel">
      <form class="login-form" @submit="doSubmit">
        <ul class="form-list">
          <li>
            <label for="">手机号</label>
            <input type="text" placeholder="请输入手机号" class="int-lg" v-model="username" name="username" />
          </li>
           <li>
            <label for="password">密码</label>
            <input type="password" placeholder="请输入密码" class="int-lg" v-model="password" name="password" autocomplete="new-password"/>
          </li>
          <!-- <li>
            <label for="">图形码</label>
            <input type="text" placeholder="请输入右侧图形码" class="int-md" v-model="captcha" name="captcha" autocomplete="nope"/>
            <img src="../../assets/imgs/captcha.png" alt="图形码" class="captcha btn-base">
          </li>
          <li>
            <label for="">验证码</label>
            <input type="text" placeholder="请输入手机号" class="int-md" v-model="smscode" name="smscode" autocomplete="nope"/>
            <button class="btn-base smscode">获取验证码</button>
          </li> -->
        </ul>
        <div class="btn-block-wrapper">
          <button type="submit" class="btn-block">开始</button>
        </div>
      </form>
      <p class="tips tc">点击开始，即表示已阅读并同意
        <em>《用户服务协议》</em>
      </p>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import {
 mapActions
} from 'vuex'

export default {
  metaInfo: {
    title: "Login Page"
  },
  data() {
    return {
      username: "",
      captcha: "",
      password:'',
      smscode: null
    };
  },
  mounted() {},
  methods: {
    ...mapActions(['login']),
    doSubmit(e) {
      e.preventDefault();
      this.login({
        username:this.username,
        password:this.password
      })
      .then(()=>{
        this.$router.replace('/course')
      })
    },
  },
  components: {
    Header
  }
};
</script>
<style lang='scss' scoped>
.form-list {
  background: #fff;
  margin: 20px 0 90px;
  padding: 0 20px;
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110px;
    display: flex;
    align-items: center;
    font-size: 32px;
    border-bottom: 1px solid #f0f0f5;
    label {
      color: #646466;
      width: 124px;
    }
    input {
      flex: 1;
      @include font-dpr(30px);
      padding-right: 130px;
    }
    .captcha {
      opacity: 0.9;
    }
    .smscode {
      background: $theme-color;
      color: #fff;
    }
  }
}
.btn-block-wrapper {
  margin-top: 98px;
  text-align: center;
  margin-bottom: 29px;
  .btn-block {
    @include btn-base(690px, 84px, 32px);
    background-color: $theme-color;
    color: #fff;
  }
}
.tips {
  font-size: 24px;
  color: #969699;
  em {
    color: $theme-color;
  }
}
</style>
